<template>
  <div class="pla-statis-info">
    <dv-border-box-7
       :color="['transparent']"
      backgroundColor="rgba(1,32,78,.8)"
    >
      <div class="pla-statis-warp">
        <div class="pla-title">
          <span>平台统计信息</span>
        </div>

        <div class="pla-statis-content">
          <div
            class="pla-statis-item"
            v-for="(item, key) in plaData"
            :key="key"
          >
            <div class="load">
              <div class="loader" :class="`loader${key}`"></div>
              <div class="item-1">
                <img src="../assets/info_1.png" v-if="key === 0" alt="" />
                <img src="../assets/info_2.png" v-if="key === 1" alt="" />
                <img src="../assets/info_3.png" v-if="key === 2" alt="" />
                <img src="../assets/info_4.png" v-if="key === 3" alt="" />
                <img src="../assets/info_5.png" v-if="key === 4" alt="" />
                <img src="../assets/info_6.png" v-if="key === 5" alt="" />
              </div>
            </div>

            <div class="item-2">
              <div class="item-2-name">{{ item.label }}</div>
              <div class="item-2-value">
                {{ formatter(item.num) }}
                <span>{{ key === 1 ? "位" : "个" }}</span>
              </div>
            </div>
            <div class="item-3">
              <img src="../assets/arr_1.png" v-if="key === 0" alt="" />
              <img src="../assets/arr_2.png" v-if="key === 1" alt="" />
              <img src="../assets/arr_3.png" v-if="key === 2" alt="" />
              <img src="../assets/arr_4.png" v-if="key === 3" alt="" />
              <img src="../assets/arr_5.png" v-if="key === 4" alt="" />
              <img src="../assets/arr_6.png" v-if="key === 5" alt="" />
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-7>
  </div>
</template>

<script>
import {
  reqPatentTotal,
  reqExpertTotal,
  reqProjectTotal,
  reqNeedTotal,
  reqUserTotal,
  reqCompanyTotal,
} from "../request/api";
export default {
  name: "PlaStatisInfo",
  data() {
    return {
      plaData: [
        {
          label: "专利数量",
          num: '',
        },
        {
          label: "专家数量",
          num:'',
        },
        {
          label: "技术项目数量",
          num: '',
        },
        {
          label: "科技需求数量",
          num: '',
        },
        {
          label: "个人会员数量",
          num: '',
        },
        {
          label: "单位会员数量",
          num: '',
        },
      ],
      timer: null,
    };
  },
  created() {
    this.getPatentTotal();
    this.getExpertTotal();
    this.getProjectTotal();
    this.getNeedTotal();
    this.getUserTotal();
    this.getCompanyTotal();
    this.timer = setInterval(() => {
      this.getPatentTotal();
      this.getExpertTotal();
      this.getProjectTotal();
      this.getNeedTotal();
      this.getUserTotal();
      this.getCompanyTotal();
    }, 10000);
  },
  methods: {
    //处理数据
    formatter(number) {
      let numbers = number.toString().split("").reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(""));
      return segs.join(",").split("").reverse().join("");
    },
    //平台专利数量

    getPatentTotal() {
      reqPatentTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[0].num.toString() !== res.data.data.toString()) {
            this.plaData[0].num = res.data.data;
          }
        }
      });
    },
    //平台专家数量
    getExpertTotal() {
      reqExpertTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[1].num.toString() !== res.data.data.toString()) {
            this.plaData[1].num = res.data.data;
          }
        }
      });
    },
    //平台技术项目数量
    getProjectTotal() {
      reqProjectTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[2].num.toString() !== res.data.data.toString()) {
            this.plaData[2].num = res.data.data;
          }
        }
      });
    },
    //科技需求数量
    getNeedTotal() {
      reqNeedTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[3].num.toString() !== res.data.data.toString()) {
            this.plaData[3].num = res.data.data;
          }
        }
      });
    },
    //平台个人会员数量
    getUserTotal() {
      reqUserTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[4].num.toString() !== res.data.data.toString()) {
            this.plaData[4].num = res.data.data;
          }
        }
      });
    },
    //平台单位会员数量
    getCompanyTotal() {
      reqCompanyTotal().then((res) => {
        if (res.data.ret) {
          if (this.plaData[5].num.toString() !== res.data.data.toString()) {
            this.plaData[5].num = res.data.data;
          }
        }
      });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //关闭
    } //利用vue的生命周期函数
  },
};
</script>

<style scoped lang="less">
.pla-title {
  font-size: 1.111vw;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #e5f2ff;
  height: 2.222vw;
  line-height: 2.222vw;
  background: url("../assets/img1.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  padding-left: 0.486vw;
  z-index: 10;
  span {
    z-index: 4;
      background-image:-webkit-linear-gradient(top,rgba(255, 255, 255, 1),rgba(155, 204, 255, 1)); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
  }
}
.pla-statis-info {
  height: 100%;
  box-sizing: border-box;
}

.pla-statis-warp {
  padding: 0.625vw 0.972vw;
  height: 100%;
  display: flex;
  flex-flow: column;
  box-shadow: 6px 0 100px -1px #021838;
  .pla-statis-content {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding-top: 3.125vw;
    padding-bottom: 5.347vw;
    box-sizing: border-box;
    .pla-statis-item {
      display: flex;
      justify-content: space-between;
      padding-left: 1.38888889vw;
      padding-right: 0.6944444444vw;
      .item-1 {
        position: absolute;
        top: 0.372vw;
        left: 0.372vw;
        width: 3.47222222vw;
        height: 3.47222222vw;
        img {
          width: 3.47222222vw;
          height: 3.47222222vw;
          border-radius: 50%;
        }
      }
      .item-2 {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        flex: 1;
        padding: 0.497vw 0 0.347vw 1.389vw;
        .item-2-name {
          font-size: 0.903vw;
          color: #ffffff;
          opacity: .6;
        }
        .item-2-value {
          font-size: 1.597vw;
          color: #ffffff;
          font-family: DINPro-Medium, DINPro;
          span {
            font-size: 0.903vw;
          }
        }
      }
      .item-3 {
        align-items: center;
        vertical-align: middle;
        display: flex;
        img {
          width: 1.528vw;
        }
      }
    }
  }
}
.load {
  position: relative;

}
.load .loader {
  font-size: 0.694vw;
  text-indent: -9999em;
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 50%;
  background: #ffffff;

  background: linear-gradient(
    to right,
    #00dfff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  animation: load 3.5s infinite ease-in-out;
  transform: translateZ(0);
}

.load .loader:before {
  width: 50%;
  height: 50%;
  background: #00dfff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";

}

.load .loader.loader1 {
  background: linear-gradient(
    to right,
    #00d8b6 10%,
    rgba(255, 255, 255, 0) 42%
  );
}

.load .loader.loader1:before {
  background: #00d8b6;
}
.load .loader.loader2 {
  background: linear-gradient(
    to right,
    #4098ff 10%,
    rgba(255, 255, 255, 0) 42%
  );
}

.load .loader.loader2:before {
  background: #4098ff;
}
.load .loader.loader3 {
  background: linear-gradient(
    to right,
    #9266ff 10%,
    rgba(255, 255, 255, 0) 42%
  );
}

.load .loader.loader3:before {
  background: #9266ff;
}
.load .loader.loader4 {
  background: linear-gradient(
    to right,
    #ad45dd 10%,
    rgba(255, 255, 255, 0) 42%
  );
}

.load .loader.loader4:before {
  background: #ad45dd;
}
.load .loader.loader5 {
  background: linear-gradient(
    to right,
    #df4a6d 10%,
    rgba(255, 255, 255, 0) 42%
  );
}

.load .loader.loader5:before {
  background: #df4a6d;
}

.load .loader:after {
  background-color: #02204b;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>